<template>
    <div>
        <NavTop/>
            <div class="common-layout">
                <el-container>
                <el-aside width="200px"><NavLeft @handle="dadHandle"></NavLeft></el-aside>
                <el-container>
                    <el-header><MySwiper/></el-header>
                    <el-main><MyList :list="list1"/></el-main>
                </el-container>
                </el-container>
            </div>
    </div>
</template>
<script>
import NavTop from '../../components/NavTop'
import MyList from './components/MyList.vue';
import MySwiper from './components/MySwiper.vue';
import NavLeft from './components/NavLeft.vue';
import axios from 'axios';
export default{
    components:{
        NavTop,
        NavLeft,
        MySwiper,
        MyList
    },
    mounted() {
        axios.get('goodslist.json').then(res=>{
            this.list=res.data.goodslist;
            this.list1=this.list.slice()
        })
    },
    data() {
        return {
            list:[],
            //navlist:[],
            list1:[]
        }
    },
    methods:{
        dadHandle(val){
            this.list1 = this.list.filter(v=>v.cid == val)
            // console.log(val);
            // this.xlist=this.list.filter(v=>v.cid==val)
        }
    }
}
</script>
<style>
.el-header{
    --el-header-padding:0;
    height: 300px !important;
}
</style>